<template>
  <!-- 简历的每一个小的模块 -->

  <div class="container">
    <!-- is加载对应cptName的模块简历 -->
    <div class="user_info">
      <!-- 删除和添加按钮 -->
      <div class="btn">
        <el-tooltip
          class="box-item"
          effect="dark"
          content="复制当前模块"
          placement="bottom-start"
        >
          <el-button
            type="success"
            :icon="Plus"
            size="small"
            @click="addModel(item)"
          ></el-button>
        </el-tooltip>
        <el-tooltip
          class="box-item"
          effect="dark"
          content="删除当前模块"
          placement="bottom-start"
        >
          <el-button
            type="success"
            :icon="Delete"
            size="small"
            @click="deleteModel(item)"
          ></el-button>
        </el-tooltip>
      </div>
      <!-- 简历模块组件 -->
      <div class="comp">
        <component
          :is="components[item.cptName]"
          :modelData="item.data"
          :modelStyle="item.style"
          :element="item"
          @click="handler(item)"
        ></component>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Plus, Delete } from '@element-plus/icons-vue'
import type { IMATERIALITEM } from '@/interface/material'
import { useResumeJsonStore } from '@/store/resume.ts'
import { cloneDeep } from 'lodash'
import $bus from '@/bus/index.ts'
let userResumeStore = useResumeJsonStore()
//bus全局事件
const handler = (item) => {
  $bus.emit('data', item)
}
//为props参数定义ts类型
const props = defineProps<{
  item: IMATERIALITEM
  components: any
}>()
//添加模块
const addModel = (item: IMATERIALITEM) => {
  // console.log(userResumeStore.resumeJsonNewStore.LAYOUT)
  const newItem = cloneDeep(item)
  const index = getModelIndex(
    userResumeStore.resumeJsonNewStore.COMPONENTS,
    newItem.keyId,
  )
  userResumeStore.resumeJsonNewStore.COMPONENTS.splice(index, 0, newItem)
  // userResumeStore.resumeJsonNewStore.COMPONENTS.splice
  console.log(userResumeStore.resumeJsonNewStore.COMPONENTS)
}
const getModelIndex = (modelList, Id) => {
  return modelList.findIndex((item) => item.keyId === Id)
}
//删除模块
const deleteModel = (item) => {
  const newItem = cloneDeep(item)
  const index = getModelIndex(
    userResumeStore.resumeJsonNewStore.COMPONENTS,
    newItem.keyId,
  )
  userResumeStore.resumeJsonNewStore.COMPONENTS.splice(index, 1)
  console.log(userResumeStore.resumeJsonNewStore.COMPONENTS)
}
</script>
<style lang="scss" scoped>
.el-button--small {
  --el-button-size: 30px !important;
}
.el-button + .el-button {
  margin-left: 5px !important;
}
.user_info {
  position: relative;
  .btn {
    position: absolute;
    top: 0;
    right: 0;
    visibility: hidden;
  }
}
.user_info:hover {
  border: 1px dashed green;
}
.user_info:hover .btn {
  visibility: visible;
}
</style>
